import * as echarts from "echarts";
export function leftTopEcharts(myChart:any) {
    // 绘制图表
    myChart.setOption({
        legend: {
            icon: 'circle',
            textStyle: {
                color: '#fff',
            },
            right: '5%'
        },
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ['日期', '12/15', '12/16', '12/17', '12/18', '12/19', '12/19'],
                ['光伏发电量', 0, 82.1, 88.7, 70.1, 53.4, 85.1],
                ['减排量', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ]
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                color: '#ffffff',
            },
        },
        splitLine: {
            lineStyle: {
                type: 'solid',
                color: '', //坐标轴线颜色
                width: '1',
            },
        },
        yAxis: {
            axisLabel: {
                color: '#ffffff',
            },
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#ffffff10', //坐标轴线颜色
                    width: '1',
                },
            },
        },
        grid: { top: '20%', bottom: '20%', right: '5%', show: true, borderColor: '#666' },
        series: [
            {
                type: 'line',
                smooth: true,
                symbol: 'none',
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' },
                color: 'rgb(103, 151, 248)'
            },
            {
                type: 'line',
                smooth: true,
                symbol: 'none',
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' },
                color: 'rgb(90, 216, 166)'
            },
        ]
    });
}
export function leftCenterEcharts(myChart:any) {
    // 绘制图表
    myChart.setOption({
        tooltip: {},
        xAxis: {
            axisLine: {
                show: false//是否显示y轴线
            },
            axisTick: {
                show: false //是否显示短标记
            },
            splitLine: { //分割线
                show: false, //是否显示分割线
            },
            axisLabel: {
                show: false
            }
        },
        yAxis: {
            data: ['40%', '48%', '55%', '65%', '88%', '98%'],
            axisLabel: {
                color: 'rgb(185, 238, 248)',
            },
            position: 'right',
            axisTick: {
                show: false  //是否显示短标记
            },
            axisLine: {
                show: false  //是否显示x轴线
            },
        },
        grid: { top: '5%', bottom: '5%', right: '20%' },
        series: [{
            type: 'bar',
            barCategoryGap: "70%",
            showBackground: true,
            data: [0.40, 0.48, 0.55, 0.65, 0.88, 0.98],
            itemStyle: {
                color: function (params: any) {
                    const colorList = [
                        ['rgb(205, 204, 153)', 'rgb(254, 154, 2)'],
                        ['rgb(205, 204, 153)', 'rgb(254, 154, 2)'],
                        ['rgb(205, 204, 153)', 'rgb(254, 154, 2)'],
                        ['rgb(203, 0, 208)', 'rgb(120, 5, 215)'],
                        ['rgb(203, 0, 208)', 'rgb(120, 5, 215)'],
                        ['rgb(203, 0, 208)', 'rgb(120, 5, 215)'],
                    ]
                    const colorItem = colorList[params.dataIndex]
                    // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
                    // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: colorItem[0]
                        },
                        {
                            offset: 1,
                            color: colorItem[1]
                        }
                    ], false)
                }
            }
        },],
    })
    window.onresize = function () {
        myChart.resize();
    }
}
export function leftBottomEcharts(myChart:any) {
    // 绘制图表
    myChart.setOption({
        tooltip: {
            trigger: 'item',
        },
        legend: {//图例
            icon: 'rect',
            itemHeight: 5,
            itemWidth: 12,
            align: 'left',
            itemStyle: {
                color: 'rgb(136, 104, 233)',//图例颜色
                align: 'right',
            },
            textStyle: {
                color: '#fff',
                right: '10'
            },
            data: ['2021年'],
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '3%',
            top: '15%',
            containLabel: true,
        },
        series: [
            {
                name: '2021年',
                smooth: true,//折现变曲线
                seriesLayoutBy: 'row',
                color: 'rgb(103, 151, 248)',
                type: 'line',
                lineStyle: {//边线
                    // width: 0,
                    color: 'rgb(136, 104, 233)'
                },
                // showSymbol: false,//圆点点
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(56, 64, 123)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(41, 157, 168)'
                        }
                    ])
                },
                data: [200, 250, 345, 460, 360, 485, 420, 510, 405, 450, 350, 440]
            }
        ],
        xAxis: {
            type: 'category',
            axisLabel: {
                color: '#fff',
                interval: '0',//相隔0个刻度显示
            },
            axisTick: {
                "show": false //隐藏x轴刻度
            },
            boundaryGap: true,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            gridIndex: 0,
            axisLabel: {
                color: '#ffffff',
            },
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: 'rgba(255,255,255,0.1)', //坐标轴线颜色
                    width: '1',
                },
            },
        },
    });
    window.onresize = function () {
        myChart.resize();
    }
}
export function centerBottomEcharts(myChart:any) {
    // 绘制图表
    myChart.setOption({
        legend: {
            //图例
            icon: 'rect',
            data: ['煤炭消耗', '电力消耗'],
            textStyle: {
                color: '#fff'
            },
            itemHeight: 8,
            itemWidth: 20
        },
        xAxis: {
            type: 'category',
            data: [
                '08/01',
                '08/02',
                '08/03',
                '08/04',
                '08/05',
                '08/06',
                '08/07',
                '08/08'
            ],
            axisTick: {
                show: false //隐藏x轴刻度
            },
            axisLabel: {
                color: '#ffffff',
            },
        },
        yAxis: {
            type: 'value',
            name: '吨标煤',
            nameGap: '10',
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    width: '0'
                }
            },
            nameTextStyle: {//y轴上方单位的颜色
                color: "#fff",
            },
            axisLabel: {
                color: '#ffffff',
            },
            axisLine: {
                //y轴线的颜色以及宽度
                show: true,
                lineStyle: {
                    color: '#666',
                    width: 1,
                    type: 'solid'
                }
            }
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '3%',
            top: '15%',
            containLabel: true,
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130, 90],
                name: '煤炭消耗',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0, 221, 214)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(28, 126, 215)'
                        }
                    ])
                }
            },
            {
                data: [120, 200, 150, 80, 70, 110, 130, 90],
                name: '电力消耗',
                type: 'bar',
                //设置渐变色
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(131, 1, 254)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(30, 124, 215)'
                        }
                    ])
                }
            }
        ]
    });
    window.onresize = function () {
        myChart.resize();
    }
}
export function rightTopEcharts(myChart:any) {
    myChart.setOption({
        title: {
            show: true,
            text: '实时监测',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: '16',
            },
            padding: 15
        },
        color: ['rgb(90, 216, 166)', 'blue'],
        legend: {
            //图例,
            icon: 'rect',
            right: 'center',
            textStyle: { color: '#fff' },
            itemWidth: 12,
            padding: 23,
            itemHeight: 8,
            itemGap: 20,
            data: [
                { name: '电力负荷', backgroundColor: 'red', itemStyle: { color: 'rgb(61, 100, 173)' } },
                { name: '实时电压', backgroundColor: 'red', itemStyle: { color: 'rgb(60, 144, 124)' } }
            ]
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '3%',
            top: '25%',
            containLabel: true
        },
        series: [
            {
                name: '电力负荷',
                smooth: true, //折现变曲线
                stack: 'Total',
                type: 'line',
                lineStyle: { color: 'rgb(90, 216, 166)' },
                areaStyle: { color: 'rgba(90, 216, 166,0.8)' },
                itemStyle: { color: '#fff', width: '10' },
                symbolSize: 5, //设定实心点的大小
                data: [800, 500, 120, 100, 475, 490]
            },
            {
                name: '实时电压',
                smooth: true, //折现变曲线
                stack: 'Total',
                type: 'line',
                lineStyle: { color: 'rgb(91, 143, 249)' },
                areaStyle: { color: 'rgba(35, 63, 108)' },
                itemStyle: { color: '#fff', width: '10' },
                symbolSize: 5, //设定实心点的大小
                data: [800, 500, 120, 100, 475, 490]
            }
        ],
        xAxis: {
            type: 'category',
            axisLabel: { color: '#fff' },
            axisTick: { show: false }, //隐藏x轴刻度
            data: ['18:00', '18:05', '18:10', '18:15', '18:20', '18:25']
        },
        yAxis: {
            axisLabel: { color: '#ffffff' },
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: 'rgba(100, 111, 125)', //坐标轴线颜色
                    width: '1'
                }
            },
        }
    });
    window.onresize = function () {
        myChart.resize();
    }
}
